<!doctype html>
<html>

<head>
    <title>Webtor Player SDK Example</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        #player {
            height: 80%;
        }
        #controls {
            padding: 1rem;
        }
        #controls i {
            padding-top: 0.3rem;
            display: block;
        }
        .control {
            padding-right: 1rem;
        }
        #files {
            padding: 0.5rem;
        }
        #files a {
            padding: 0.5rem;
        }
    </style>
    <!-- <script src="../../dist/index.min.js" charset="utf-8" async></script> -->
    <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
</head>

<body>
    <div id="controls">
        <span class="control">
            External controls*: 
            <button id="play">Play</button>
            <button id="pause">Pause</button>
            <button id="moveto1min">Move to 1 min</button>
            <button id="movetostart">Move to start</button>
        </span>
        <span class="control">
            Player status: <span id="player-status">NONE</span>
        </span>
        <span class="control">
            Current time: <span id="current-time">0</span> sec
        </span>
        <span class="duration">
            Duration: <span id="duration">0</span> sec
        </span>
        <br />
        <i>* - works only after first click on play button in the player</i>
    </div>
    <div id="player"></div>
    <div id="files"></div> 
    <script>
        var el = document.getElementById('player');
        window.webtor = window.webtor || [];
        window.webtor.push({
            id: 'player',
            // baseUrl: 'https://webtor.io',
            // baseUrl: 'http://192.168.0.100:4000',
            magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel',
            title: 'Example Movie',
            subtitles: [
                // {
                //     srclang: 'en',
                //     label: 'SHQIP',
                //     src: 'https://dl.dropboxusercontent.com/s/afsiiiw705h3vkk/Ava.2020.HDRip.srt?dl=0',
                //     default: true,
                // },
            ],
            width: '100%',
            height: '100%',
            features: {
                autoSubtitles: true,
                continue:      false,
                // title:       false,
                // p2pProgress: false,
                // subtitles:   false,
                settings:      false,
                // fullscreen:  false,
                // playpause:   false,
                // currentTime: false,
                // timeline:    false,
                // duration:    false,
                // volume:      false,
                // chromecast:  false,
            },
            on: function(e) {
                if (e.name == window.webtor.TORRENT_FETCHED) {
                    console.log('Torrent fetched!', e.data.files);

                    var p = e.player;
                    var files = document.getElementById('files');
                    for (const f of e.data.files) {
                        if (!f.name.endsWith('.mp4')) continue;
                        var a = document.createElement('a');
                        a.setAttribute('href', f.path);
                        a.innerText = f.name;
                        files.appendChild(a);
                        a.addEventListener('click', function(e) {
                            e.preventDefault();
                            p.open(e.target.getAttribute('href'));
                            return false;
                        });
                    }
                }
                if (e.name == window.webtor.TORRENT_ERROR) {
                    console.log('Torrent error!')
                }
                if (e.name == window.webtor.INITED) {
                    var p = e.player;
                    document.getElementById('play').addEventListener('click', function(ev) {
                        p.play();
                    });
                    document.getElementById('pause').addEventListener('click', function(ev) {
                        p.pause();
                    });
                    document.getElementById('moveto1min').addEventListener('click', function(ev) {
                        p.setPosition(60);
                    });
                    document.getElementById('movetostart').addEventListener('click', function(ev) {
                        p.setPosition(0);
                    });
                }
                if (e.name == window.webtor.PLAYER_STATUS) {
                    document.getElementById('player-status').innerHTML = e.data;
                }
                if (e.name == window.webtor.OPEN) {
                    console.log(e.data);
                }
                if (e.name == window.webtor.CURRENT_TIME) {
                    document.getElementById('current-time').innerHTML = parseInt(e.data);
                }
                if (e.name == window.webtor.DURATION) {
                    document.getElementById('duration').innerHTML = parseInt(e.data);
                }
                if (e.name == window.webtor.OPEN_SUBTITLES) {
                    console.log(e.data);
                }
            },
        });
    </script>
</body>

</html>